<template>
  <div class="flowpath-container">
    <div>
      <div class="flex_align">
        <div class="mb20 mt20">
          <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
          <el-input
            v-model="searchInfo"
            class="w164 mr10"
            :placeholder="translate('请输入关键字')"
          />
        </div>
        <div class="mb20">
          <span class="color_494949 ft12 pr5">
            {{ translate('审核状态') }}：
          </span>
          <el-select
            v-model="status"
            class="w200 mr10"
            :placeholder="translate('请选择')"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-checkbox v-model="IsSelfAudit" class="mr10">
            自己审核通过的记录
          </el-checkbox>
          <el-checkbox v-model="NoReadOrDo" class="mr10">
            待阅或待处理的记录
          </el-checkbox> -->
          <el-button class="settingBtn mr10" type="primary" @click="getList">
            {{ translate('查询') }}
          </el-button>
        </div>
      </div>
      <el-table :data="tableData" :loading="loading">
        <el-table-column :label="translate('流程名称')" prop="FormName" />
        <el-table-column :label="translate('当前审核人')" prop="CurOperTxt" />
        <el-table-column :label="translate('审核状态')">
          <template #default="{ row }">
            <div>
              {{ statusInfo(row.Status) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="translate('时间')"
          prop="CreateDate"
          show-overflow-tooltip
        />
        <el-table-column :label="translate('操作')" width="200">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('detail')"
              link
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              {{ translate('详情') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { GetInstanceData } from '@/api/form'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Flowpath',
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        layout: 'total, sizes, prev, pager, next, jumper',
        IsDone: false,
        IsSeen: false,
        NoReadOrDo: false,
        IsSelfAudit: false,
        status: -100,
        statusArr: [
          {
            label: translate('全部'),
            value: -100,
          },
          {
            label: translate('草稿'),
            value: 0,
          },
          {
            label: translate('审核中'),
            value: 1,
          },
          {
            label: translate('已审核通过'),
            value: 2,
          },
          {
            label: translate('退回'),
            value: -1,
          },
          {
            label: translate('未通过'),
            value: -3,
          },
        ],
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      statusInfo(val) {
        switch (val) {
          case 1:
            return translate('审核中')
          case 2:
            return translate('已审核通过')
          case 0:
            return translate('草稿')
          case -1:
            return translate('退回')
          case -3:
            return translate('未通过')
        }
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'FormName', value: this.searchInfo, displayType: 'like' },
            {
              name: 'Status',
              value: this.status === -100 ? '' : this.status,
              displayType: 'Equal',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await GetInstanceData(params)
        if (data.code === '200') {
          this.tableData = data.data.rows
          this.total = data.data.total
        }
        console.log(data)
      },
      detailFn(row) {
        this.$router.push({
          path: '/table/detail',
          query: {
            formId: row.FormId,
            formcode: row.Code,
          },
        })
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }

    .iconcommon {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: blue;
    }
    .iconcommon2 {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: red;
    }

    .w200 {
      width: 200px;
    }
    .flex_align {
      display: flex;
      align-items: center;
    }
  }
</style>
